<template>
  <view class="cart" v-if="cartList">
    <view class="goods-list">
      <view
        class="goods"
        v-for="(item, index) in cartList"
        :key="item.goods_id"
      >
        <!-- 1 复选框 -->
        <view class="goods-chk">
          <radio-group @click="handleGoodsChange(index)">
            <radio
              :value="item.goods_id"
              class="chk"
              color="#eb4450"
              :checked="item.check"
            ></radio>
          </radio-group>
        </view>
        <!-- 2 图片 -->
        <view class="goods-img">
          <u-image
            width="100%"
            mode="widthFix"
            :src="item.goods_small_logo"
          ></u-image>
        </view>
        <!-- 3 名称 -->
        <view class="goods-info">
          <!-- 商品名称 -->
          <view class="goods-name u-line-2">{{ item.goods_name }}</view>
          <!-- 商品编辑栏 -->
          <view class="goods-tool">
            <view class="goods-price ">￥ {{ item.goods_price }}</view>
            <view class="goods-count">
              <view class="goods-edit" @click="handleCountUpdate(index, -1)"
                >-</view
              >
              <view class="goods-num">{{ item.count }}</view>
              <view class="goods-edit" @click="handleCountUpdate(index, 1)"
                >+</view
              >
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 全选 数据状态栏 -->
    <view class="status-tool">
      <!-- 全选 -->
      <view class="all-chk">
        <radio-group>
          <radio @click="handleAllCheck" color="#eb4450" :checked="allChecked"
            >全选</radio
          >
        </radio-group>
      </view>
      <!-- 总价 -->
      <view class="price">
        合计: <text>￥ {{ price }}</text>
      </view>
      <!-- 结算 -->
      <view class="settle" @click="goOrder">去结算({{ number }})</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      cartList: null,
      allChecked: "",
    };
  },
  onLoad() {
    this.cartList = this.$store.state.cart_list;
    this.allChecked = this.cartList.every((v) => v.check);
  },
  computed: {
    price() {
      return this.$store.getters.allprice;
    },
    number() {
      return this.$store.getters.allcount;
    },
  },
  methods: {
    async handleCountUpdate(i, num) {
      if (this.cartList[i].count == 1 && num == -1) {
        const [err, res] = await uni.showModal({
          title: "确认操作？", // 标题
          content: "你真的要删除我吗/(ㄒoㄒ)/~~", // 内容
          showCancel: true, // 可以不要
        });
        console.log(res);
        if (res.confirm) {
          this.cartList.splice(i, 1);
        }
      } else {
        this.cartList[i].count += num;
      }
      this.$store.commit("add", this.cartList);
    },
    handleAllCheck() {
      this.allChecked = !this.allChecked;
      this.cartList.forEach((v) => {
        v.check = this.allChecked;
        console.log(v.check);
      });
    },
    handleGoodsChange(i) {
      this.cartList[i].check = !this.cartList[i].check;
      if (this.cartList.every((v) => v.check)) {
        this.allChecked = true;
      } else {
        this.allChecked = false;
      }
      this.$store.commit("add", this.cartList);
    },
  },
};
</script>
<style lang="scss">
.cart {
  padding-bottom: 83rpx;
  .goods-list {
    .goods {
      display: flex;
      padding: 10rpx;
      border-bottom: 1rpx solid #eee;
      .goods-chk {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        .chk {
          border-radius: 50%;
        }
      }

      .goods-img {
        flex: 2;
        padding: 10rpx;
      }

      .goods-info {
        flex: 3;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        .goods-name {
        }

        .goods-tool {
          display: flex;
          justify-content: space-between;
          .goods-price {
            font-size: 30rpx;
            color: $themeColor;
          }

          .goods-count {
            width: 150rpx;
            justify-content: space-between;
            display: flex;
            .goods-edit {
              width: 40rpx;
              height: 40rpx;
              border: 1px solid #ccc;
              display: flex;
              align-items: center;
              justify-content: center;
              border-radius: 50%;
            }

            .goods-num {
            }
          }
        }
      }
    }
  }
}
.status-tool {
  position: fixed;
  width: 100%;
  left: 0;
  bottom: 0;
  background-color: #fff;
  height: 80rpx;
  border-top: 1rpx solid #eee;
  display: flex;
  padding: 0 10rpx;
  align-items: center;
  justify-content: space-between;
  .all-chk {
    radio-group {
      radio {
      }
    }
  }

  .price {
    flex: 1;
    padding: 0 30rpx;
    text {
      font-size: 30rpx;
      color: $themeColor;
    }
  }

  .settle {
    width: 170rpx;
    height: 50rpx;
    font-size: 24rpx;
    border-radius: 25rpx;
    background-color: $themeColor;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
</style>
